<template>
  <!-- Asia  2-->
  <section
    class="container container--masthead Thin masthead--expanded"
    v-if="isRegion"
  >
    <div class="region region--full masthead-elements">
      <div class="column column--full min-markets">
        <div class="group group--markets">
          <div class="markets__list">
            <div class="markets__select j-thin-markets-dropdown-container">
              <select
                class="dropdown j-dropdown--thin-markets"
                v-model="stocksIndex"
                @change="handleRegionChange(stocksIndex)"
              >
                <option
                  v-for="(item, index) in stockTabs"
                  :key="index"
                  :value="index"
                >
                  {{ item.tabName }}
                </option>
              </select>
            </div>
            <div class="markets__data j-thin-dynamic-container">
              <div class="list__item" v-for="item in stocks" :key="item.uuid">
                <a class="link">
                  <router-link
                    :to="{
                      name: 'stockDetail',
                      params: { symbol: item.symbol },
                    }"
                  >
                    <span class="label">{{ item.symbol }}</span>
                  </router-link>

                  <span class="value positive">
                    <bg-quote class="positive"
                      >{{
                        (((item.close - item.open) * 100) / item.open).toFixed(
                          2
                        )
                      }}%</bg-quote
                    >
                  </span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
// 请求首页数据
import homeRequest from "@/api/home.js";
let stockTabs = ref([]);
let stocks = ref([]);
let isRegion = ref(false);
let stocksIndex = ref(0);
// let selectedTabName = ref('');
function handleRegionChange(stocksIndex) {
  stocksIndex = stocksIndex;
  stocks.value = stockTabs.value[stocksIndex].stocks;
}

onMounted(() => {
  // handleRegionChange(0)
  homeRequest
    .regionData({})
    .then((res) => {
      if (res.code == "0") {
        stockTabs.value = res.data.stockTabs;
        stocks.value = stockTabs.value[0].stocks;
        isRegion.value = true;
      }
    })
    .catch((e) => {});
});
</script>

<style scoped lang="scss">
// .min-markets {
//   padding: 13px 10px 14px;
// }
</style>
